<template>
  <div class="shop">
    <!-- 顶部导航栏 -->
    <NavBar title="商品分类"></NavBar>
    <!-- content -->
    <van-tree-select
      :main-active-index.sync="activeIndex"
      height="87vh"
      :items="items"
    >
  <template #content>
    <div class="shop" v-for="(item, i) in items" :key="i">
      <van-grid :column-num="3" v-if="activeIndex == i">
        <van-grid-item v-for="value in navItems" :key="value.id" :to="'/shopdetails/' + value.id">
          <van-image :src="API.BASE_SERVER_URL + value.defaultImg" />
          <span>{{ value.name | shopTitle }}</span>
        </van-grid-item>
      </van-grid>
    </div>
  </template>
</van-tree-select>
<Tabbar />
  </div>
</template>
<script>
export default {
  data () {
    return {
      activeIndex: 0,
      items: [],
      navItems: []
    }
  },
  methods: {
    async getNavlist () {
      const { data: res } = await this.$get(this.API.API_URL_CATEGORY_CONDITION)
      res.forEach((item, i) => {
        this.items.push({ text: item.name, data: res[i] })
      })
      this.getNavitemList()
    },
    async getNavitemList () {
      const { data: res } = await this.$post(this.API.API_URL_CATALOG_INDEX_PRODUCTS + '/' + this.items[this.activeIndex].data.id)
      this.navItems = res[0].productRelationList
    }
  },
  created () {
    this.getNavlist()
  },
  watch: {
    activeIndex (val) {
      this.getNavitemList()
    }
  },
  // 过滤器
  filters: {
    shopTitle (val) {
      if (val.length > 15) return val.slice(0, 14) + '...'
      return val
    }
  }
}
</script>
<style scoped>
</style>
